<template>
  <!--    就诊人组件的静态结构-->
    <el-card class="box-card">
        <!--            卡片的头部-->
        <template #header>
            <div class="card-header">
                <span>就诊人管理</span>
                <el-button type="primary" size="default" @click="addUser" :icon="User">添加就诊人</el-button>
            </div>
        </template>

        <!--    就诊人管理模块，展示就诊人信息-->
        <div class="users" v-if="scene==0">
            <visitor @click="changeIndex(index)"
                     class="user"
                     v-for="(user,index) in userArr"
                     :key="user.id"
                     @removeUser = "removeUser"
                     @changeScene="changeScene"
                     :user=user
                     :index=index
                     :currentIndex=currentIndex>
            </visitor>
        </div>

        <!--    添加|修改就诊人的静态结构-->
        <div class="from" v-if="scene==1">
            <el-divider content-position="left">就诊人信息</el-divider>
            <el-form style="width: 60%;margin: 10px auto">
                <el-form-item label="用户姓名">
                    <el-input v-model="userParams.name" placeholder="请输入用户姓名"/>
                </el-form-item>
                <el-form-item label="证件类型">
                    <el-select v-model="userParams.certificatesType" placeholder="请选择正确的证件类型"
                               style="width: 100%">
                        <el-option :label="item.name" :value="item.value" v-for="(item) in arrType" :key="item.id"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="证件号码">
                    <el-input v-model="userParams.certificatesNo" placeholder="请输入证件号码"/>
                </el-form-item>
                <el-form-item label="用户性别">
                    <el-radio-group v-model="userParams.sex">
                        <el-radio label="1">男</el-radio>
                        <el-radio label="0">女</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="出生日期">
                    <el-date-picker
                            value-format="YYYY-MM-DD"
                            v-model="userParams.birthdate"
                            type="date"
                            placeholder="请选择日期"
                            style="width: 100%"/>
                </el-form-item>
                <el-form-item label="手机号码">
                    <el-input  v-model="userParams.phone" placeholder="请输入手机号码"/>
                </el-form-item>
            </el-form>

            <el-divider content-position="left">建档信息（完善后部分医院首次就诊不排队建档）</el-divider>
            <el-form style="width: 60%;margin: 10px auto">
                <el-form-item label="婚姻状况">
                    <el-radio-group  v-model="userParams.isMarry">
                        <el-radio label="1">已婚</el-radio>
                        <el-radio label="0">未婚</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="资费/医保">
                    <el-radio-group  v-model="userParams.isInsure">
                        <el-radio label="1">自费</el-radio>
                        <el-radio label="0">医保</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="当前住址">
                    <el-cascader  v-model="userParams.addressSelected" style="width: 60%" :props="props"/>
                </el-form-item>
                <el-form-item label="详细地址">
                    <el-input  v-model="userParams.address" placeholder="请输入详细地址"/>
                </el-form-item>
            </el-form>


            <el-divider content-position="left">联系人信息（选填）</el-divider>
            <el-form style="width: 60%;margin: 10px auto">
                <el-form-item label="用户姓名">
                    <el-input  v-model="userParams.contactsName" placeholder="请输入用户姓名"/>
                </el-form-item>
                <el-form-item label="证件类型">
                    <el-select  v-model="userParams.contactsCertificatesType" placeholder="请选择正确的证件类型" style="width: 100%">
                        <el-option :label="item.name" :value="item.value" v-for="(item) in arrType" :key="item.id"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="证件号码">
                    <el-input v-model="userParams.contactsCertificatesNo"  placeholder="请输入证件号码"/>
                </el-form-item>
                <el-form-item label="手机号码">
                    <el-input v-model="userParams.contactsPhone"  placeholder="请输入手机号码"/>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submit">提交</el-button>
                    <el-button @click="handler">重写</el-button>
                </el-form-item>
            </el-form>
        </div>
    </el-card>


</template>

<script setup lang="ts">
import {onMounted, reactive, ref, watch} from "vue";
import {User} from "@element-plus/icons-vue";
import Visitor from "@/components/visitor/visitor.vue";
import {reqAllUser, reqCertificationType, reqCity,reqAddOrUpdateUser} from "@/api/user";
import {useRoute,useRouter} from 'vue-router'
import type {CascaderProps} from 'element-plus'
import type {AllUser, AllUserResponseData, DocumentArr, DocumentTypeResponseData,AddOrUpdateUser} from "@/api/user/type.ts";
import {ElMessage} from "element-plus";
//存储全部就诊人信息
let userArr = ref<AllUser>([])
//存储用户确定就诊人信息的索引值
let currentIndex = ref<number>(-1)
//定义一个响应式数据
let scene = ref<number>(0)
//存储证件类型数组
let arrType = ref<DocumentArr>([])

//收集新增就诊人的数据
let userParams = reactive<AddOrUpdateUser>({
    name: '',
    certificatesType: '',
    certificatesNo: '',
    sex: 0,
    birthdate: '',
    phone: '',
    isMarry: 0,
    isInsure: 0,
    addressSelected: [],
    address: '',
    contactsName: '',
    contactsCertificatesNo: '',
    contactsCertificatesType: '',
    contactsPhone: '',
})
let $route = useRoute()
let $router = useRouter()

onMounted( () => {
    //获取就诊人信息集合
     getUsers()
    //获取证件类型
     getDocumentType()
    //判断路径是否有type = add,即是否是从挂号组件而来
    if($route.query.type=='add'){
        scene.value = 1
    }
    if($route.query.type=='edit'){
        scene.value = 1
    }
})

//监听所有就诊人的数据
watch(()=>userArr.value,()=>{
    if($route.query.type=='edit'){
        let user=userArr.value.find((item:any)=>{
            return item.id == $route.query.id
        })
        Object.assign(userParams,user)
    }
})

// 点击就诊人子组件的回调
const changeIndex = (index: number) => {
    currentIndex.value = index
}

//获取就诊人信息集合
const getUsers = async () => {
    let result: AllUserResponseData = await reqAllUser()
    if (result.code == 200) {
        userArr.value = result.data
    }
}


//添加就诊人按钮的回调
const addUser = () => {
    //清空上一次的数据
    reset()
    scene.value = 1
}

//就诊人子组件自定义事件的回调
const changeScene = (user:AddOrUpdateUser) => {
    //子组件获取数据进行回显
    scene.value = 1
    //收集已有的就诊人的信息
    Object.assign(userParams,user)
}


//获取证件类型的回调
const getDocumentType = async () => {
    let result: DocumentTypeResponseData = await reqCertificationType()
    if (result.code == 200) {
        arrType.value = result.data
    }
}

//级联选择器的数据
const props: CascaderProps = {
    lazy: true,//懒加载
    //加载选择器数据的方法
    async lazyLoad(node: any, resolve: any) {
        let result: any = await reqCity(node.data.id || '86')
        // 整理数据
        let showData = result.data.map((item: any) => {
            return {
                id: item.id,
                label: item.name,
                value: item.value,
                leaf: !item.hasChildren
            }
        })
        //注入组件需要展示的数据
        resolve(showData)

    },
}

//提交按钮的方法回调
const submit = async ()=>{
    //新增就诊人||更新已有的就诊人
    try{
        await reqAddOrUpdateUser(userParams)
        ElMessage({
            type:'success',
            message:userParams.id?'更新成功':'新增成功'
        })
        if($route.query.type=='add'||$route.query.type=='edit'){
            $router.back()
        }else {
            //切换场景为零
            scene.value=0
            //重新获取全部的就诊人信息
            await getUsers()
        }

    }catch (error){
        ElMessage({
            type:'error',
            message:error.message
        })
    }
}

//清空userParams的数据
const reset = ()=>{
    Object.assign(userParams,{
        id:'',
        name: '',
        certificatesType: '',
        certificatesNo: '',
        sex: 0,
        birthdate: '',
        phone: '',
        isMarry: 0,
        isInsure: 0,
        addressSelected: [],
        address: '',
        contactsName: '',
        contactsCertificatesNo: '',
        contactsCertificatesType: '',
        contactsPhone: '',
    })
}

//重写按钮的回调
const handler = ()=>{
    reset()
}

//子组件的自定义事件，删除按钮触发
const removeUser = ()=>{
    //再次获取就诊人信息集合
    getUsers()
}
</script>


<style scoped lang="scss">
.box-card {
  margin: 20px 0;

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .users {
    display: flex;
    flex-wrap: wrap;

    .user {
      width: 32%;
      margin: 5px;
    }
  }
}
</style>